<template>
  <div>
    <div class="formdata">
      <aside>
        <p>修改个人信息</p>
        <el-form :model="userinfoForm" :rules="userinfoRules" ref="changeuserinfoRef">
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="userinfo.username" autocomplete="off" disabled></el-input>
          </el-form-item>
          <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickname">
            <el-input v-model="userinfoForm.nickname" autocomplete="off" placeholder="请输入用户昵称"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
            <el-input v-model="userinfoForm.email" autocomplete="off" placeholder="请输入用户邮箱"></el-input>
          </el-form-item>
        </el-form>
        <div class="btnplace">
          <el-button @click="resetForm" size="small">重 置</el-button>
          <el-button @click="confimFn" type="primary" size="small">确 定</el-button>
        </div>
      </aside>
      <aside>
        <p>查看个人信息</p>
        <el-form>
        <el-form-item label="用户名:" :label-width="formLabelWidth" >
          <span>{{ userinfo.username }}</span>
        </el-form-item>
        <el-form-item label="昵称:" :label-width="formLabelWidth">
          <span>{{ userinfo.nickname }}</span>
        </el-form-item>
        <el-form-item label="邮箱:" :label-width="formLabelWidth">
          <span>{{ userinfo.email }}</span>
        </el-form-item>
      </el-form>
      </aside>
    </div>
  </div>
</template>

<script>
import { getuserinfoAPI, updateuserinfoapi } from '@/api'
import { mapActions } from 'vuex'
export default {
  name: 'admin-category',
  data () {
    return {
      userinfo: {},
      formLabelWidth: '80px',
      userinfoForm: {
        nickname: '',
        email: ''
      },
      userinfoRules: {
        nickname: [
          { required: true, message: '请输入用户呢称', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '分类名必须为1-10位的非空字符串', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'blur'] }
        ]
      }
    }
  },
  mounted () {
    this.getuserinfo()
  },
  methods: {
    // 获取个人信息
    async getuserinfo () {
      const { data } = await getuserinfoAPI()
      this.userinfo = data.data
    },
    ...mapActions(['GETUSERINFO']),
    // 确定修改信息
    confimFn () {
      this.$refs.changeuserinfoRef.validate(async valid => {
        if (valid) {
          const { data } = await updateuserinfoapi(this.userinfoForm)
          if (data.status !== 0) return this.$message.error(data.message)
          this.$message.success(data.message)
          this.getuserinfo()
          this.GETUSERINFO()
          this.userinfoForm.nickname = ''
          this.userinfoForm.email = ''
        } else {
          return false
        }
      })
    },
    // 重置按钮 - 重置表单
    resetForm () {
      this.$refs.changeuserinfoRef.resetFields()
    }
  }
}
</script>

<style scoped>
   .addcate{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
   }
   .el-input{
    width:300px;
   }
  .el-button {
    border-radius: 8px;
  }
  .btnplace {
    text-align: center;
  }
  .formdata {
    display: flex;
    justify-content: space-around;
  }
  p {
    font-size: large;
    text-align: center;
  }
  ::v-deep .el-input__inner{
    height: 2.5em;
    border-radius: 14px;
  }
</style>
